import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker,Image ,Input , Video} from '@tarojs/components'
import './eye.css'
import { AtAvatar, AtList, AtInput, AtButton, AtActivityIndicator} from "taro-ui"
import app from '../../main';

export default class Eye extends Component {

    config = {
      navigationBarTitleText: '拍摄眼睛视频',
      navigationBarBackgroundColor: "#000000",
      navigationBarTextStyle: "white",
    }
    constructor () { 
      super(...arguments); 
      this.state = {
        frame:'https://experts.bayou-tech.cn/img/imgs/frame.png',
        cicle:'https://experts.bayou-tech.cn/img/imgs/cicle.png',
        stop:'https://experts.bayou-tech.cn/img/imgs/stop.png',
        style:'font-size:17px; color:white; line-height:30px;',
        videoSrc:'',
        show:1,
        isupload:1,
      }
      this.ctx = wx.createCameraContext()
    }

    startRecord() {
        this.ctx.startRecord({
            success: (res) => {

                this.setState({
                    show:2
                }) 
            },
            fail: (e) => {
                console.log(e)
            }
        })
        // let me = this
        // wx.getSetting({
        //     success (res) {
        //         // console.log(res.authSetting["scope.record"])
        //         if(res.authSetting["scope.camera"]  && res.authSetting["scope.record"]){
        //             me.ctx.startRecord({
        //                 success: (res) => {
        //                     me.setState({
        //                         show:2
        //                     }) 
        //                 },
        //                 fail: (e) => {
        //                     console.log(e)
        //                 }
        //             })
        //         }else{
        //             // app.alertTab('若想拍摄视频请先授权相机功能和录音功能')
        //             wx.openSetting({
        //                 success (res1) {
        //                     console.log(res1.authSetting)
        //                 },
        //                 fail(res2){
        //                     console.log(res2)
        //                 }
        //             })
        //             // wx.authorize({
        //             //     scope: 'scope.record',
        //             //     success () {
        //             //       // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
        //             //       wx.startRecord()
        //             //     },fail(res2){
        //             //         console.log(res2)
        //             //     }
        //             // })
        //             // wx.authorize({
        //             //     scope: 'scope.camera',
        //             //     success () {
        //             //       // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
        //             //       wx.startRecord()
        //             //     },fail(res2){
        //             //         console.log(res2)
        //             //     }
        //             // })
        //         }
        //     }
        // })
    }


    stopRecord() {
        this.ctx.stopRecord({
            success: (res) => {
                this.setState({
                    // src: res.tempThumbPath,
                    videoSrc: res.tempVideoPath,
                    show:3
                }) 
            }
        })
        
    }

    reset(){
        this.setState({
            show:1
        })
    }

    //跳转
    gotoLoading(){
        let me = this
        this.setState({
            isupload:2
        })
        Taro.uploadFile({
            url: app.apiUri + '/admin/upload/image',
            filePath: this.state.videoSrc,
            name: 'file',
            formData: {
              name: 'file'
            },
            success(res) {
              let data = JSON.parse(res.data);
              if (data.status == 200) {
                    app.eyesvideo = data.result
                    console.log(app.eyesvideo)
                    if(me.$router.params.id == '10'){
                        app.redirectTo('../chatsub/pages/Chat/Chat?type='+ 'video')
                    }else if(me.$router.params.id == '20'){
                        app.redirectTo('../quicklyConsultationModify/quicklyConsultationModify')
                    }else{
                        app.redirectTo('../quicklyConsultation/quicklyConsultation')
                    }
                   
              }
            }       
        })       
    }
 
    render () {
      return (
        <View className='index'>          
            <View className='aaa' style={this.state.isupload == 1 ? 'display:none': 'display:block'}>
                <AtActivityIndicator size={50} mode='center' content='上传中...'></AtActivityIndicator> 
            </View>
            <View className='v_box' style={this.state.isupload == 2 ? 'display:none': 'display:block'}>
                <View className='box'>           
                    <View style={this.state.style}>录制中，请将左、 右眼分别向上，向左，向下，向右看</View>
                </View>

                <Image className='frame' src={this.state.frame}/>
                {
                    this.state.show != 3 &&
                    <camera class='cemera' device-position="front" flash="auto" binderror="error"/>
                }
                <Video 
                    style={this.state.show == 3 ? 'display:block' : 'display:none'}
                    className='images'
                    src={this.state.videoSrc}
                    controls={true}
                    autoplay={false}
                    initialTime='0'
                    loop={false}
                    muted={false}
                />

                <View className='cicleBox' style={this.state.show == 1 ? 'display:block' : 'display:none'}>
                    <Image className='cicle' src={this.state.cicle} onClick={this.startRecord.bind(this)} />
                </View>

                <View className='cicleBox' style={this.state.show == 2 ? 'display:block' : 'display:none'}>
                    <Image className='cicle' src={this.state.stop} onClick={this.stopRecord.bind(this)} />
                </View>

                <View className='btnbox' style={this.state.show == 3 ? 'display:block' : 'display:none'}>
                    <AtButton className='btn' type='primary' onClick={this.reset.bind(this)}>再拍一次</AtButton>
                    <AtButton className='btn' type='primary' onClick={this.gotoLoading.bind(this)}>确定</AtButton>
                </View>

                {/* {
                    this.state.show == 3
                    ?
                    <View className='btnbox'>
                        <AtButton className='btn' type='primary' onClick={this.reset.bind(this)}>再拍一次</AtButton>
                        <AtButton className='btn' type='primary' onClick={this.gotoLoading.bind(this)}>确定</AtButton>
                    </View>
                    :
                    <View>
                        {
                            this.state.show == 2 
                            ?
                            <View className='cicleBox'>
                                <Image className='cicle' src={this.state.stop} onClick={this.stopRecord.bind(this)} />
                            </View>
                            :
                            <View className='cicleBox'>
                                <Image className='cicle' src={this.state.cicle} onClick={this.startRecord.bind(this)} />
                            </View>
                        }
                    </View>
                } */}
            </View>
        </View>
      )
    }
  }
  
  